<template>
    <div class="sales-container">
        <div id="main" style="width: 600px; height: 400px"></div>
        <div class="rank">
            <el-row>
                <el-button type="text">今日</el-button>
                <el-button type="text">本周</el-button>
                <el-button type="text">本月</el-button>
                <el-button type="text">全年</el-button>
                <el-date-picker
                    v-model="value"
                    type="daterange"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    :default-time="defaultTime"
                ></el-date-picker>
            </el-row>
            <el-card>
                <template #header>
                    <span>门店销售额排名</span>
                </template>
                <RankItem v-for="item in ranks" :key="item" :order="item.order" :address="item.address" :mount="item.mount"></RankItem>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import RankItem from "./RankItem.vue"
export default {
    name: 'Sales',
    data() {
        return {
            value: '',
            defaultTime: [
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ],
            ranks:[
                {
                    order:1,
                    address:'工专路0号店',
                    mount:323234
                },
                {
                    order:2,
                    address:'工专路0号店',
                    mount:323234
                },
                {
                    order:3,
                    address:'工专路0号店',
                    mount:323234
                },
                {
                    order:4,
                    address:'工专路0号店',
                    mount:323234
                },
                {
                    order:5,
                    address:'工专路0号店',
                    mount:323234
                },
            ]
        }
    },
    components:{
        RankItem
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'))
        const months = this.genMonths()
        const saleData = [
            300,
            1190,
            700,
            1100,
            900,
            200,
            1000,
            200,
            230,
            190,
            500,
            300,
        ]
        // 指定图表的配置项和数据
        const option = {
            title: {
                text: '销售趋势',
            },
            tooltip: {},
            xAxis: {
                data: months,
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: saleData,
                },
            ],
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    },
    methods: {
        genMonths() {
            const months = []
            for (let i = 1; i < 13; i++) {
                months.push[`${i}月`]
            }
            return months
        },
    },
}
</script>

<style>
.sales-container {
    display: flex;
}
.rank{
    display: flex;
    flex-direction: column;
}
</style>